<template>
	<view>
		<view>
			<view class="" style="display: flex; margin-top: 40rpx; padding: 40rpx 60rpx">
				<view class="">
					<image style="width: 200rpx; height: 250rpx;" @click="clickImg(studentInfo.stuPhoto)"
						:src="studentInfo.stuPhoto ?studentInfo.stuPhoto:'https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png'"
						mode=""></image>
				</view>
				<view style="margin-left: 80rpx;display: flex; flex-direction: column; justify-content: space-around;">
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">宿舍号：</view>
						<view class="character">{{studentInfo.dormitoryName}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">姓名：</view>
						<view class="character">{{studentInfo.studentName}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">性别：</view>
						<view class="character">{{studentInfo.sex == 0 ?"男" :"女"}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">班级：</view>
						<view class="character">{{studentInfo.className}}</view>
					</view>

					<view style="display: flex; margin-top: 8rpx;">
						<view class="character">班主任：</view>
						<view class="character">{{studentInfo.teacherName}}</view>
					</view>
					<view style="display: flex; margin-top: 8rpx;">
						<view class="character">班主任电话：</view>
						<view class="character">{{studentInfo.teacherPhone}}</view>
					</view>
				</view>
			</view>


			<!-- 头部 -->
			<view class="" style="display: flex; align-items: center; padding: 20rpx 30rpx 40rpx 50rpx">
				<image src="../../../static/pic/tixinglanse.png" style="width: 60rpx; height: 60rpx;" mode=""></image>
				<view class="" style="font-size: 36rpx; font-weight: 700;">处理记录</view>
			</view>
			<!-- 头部 -->
			<!--  -->
			<view class="" style="padding: 0 40rpx;" v-for="(item,index) in recordList" :key="index">
				<view class="" style="display: flex; align-items: center; justify-content: space-between; height: 40rpx;">
					<view class="" style="display: flex; align-items: center;">
						<image src="../../../static/pic/xiaobiaoti.png" style="width: 40rpx; height: 40rpx;" mode="">
						</image>
						<view class="" style="margin-left: 30rpx; font-weight: 600;">{{item.createTime}}</view>
					</view>
					<view class="" v-if="item.type == 2"
						style="border: 1rpx solid green; padding: 5rpx 10rpx; border-radius: 10rpx; font-size: 28rpx; color: green;">
						已提交
					</view>
					<view class="" v-if="item.type == 4 || item.type == 7"
						style="border: 1rpx solid green; padding: 5rpx 10rpx; border-radius: 10rpx; font-size: 28rpx; color: green;">
						已完成
					</view>
				</view>
				<view style="border-left: 1rpx solid #aaa; padding: 20rpx 0 20rpx 45rpx; margin-left: 20rpx;"
					:class="(index == recordList.length -1) ? 'lastBox' : ''">
					<view style="border: 1rpx solid #aaa; border-radius: 10rpx; padding:0 20rpx 28rpx 20rpx;">
						<uni-section v-if="item.type == 2" class="mb-10" title="提交班主任处理" type="line">
							<template v-slot:right>提交人：{{item.createBy}}</template>
							<view style="padding: 0 35rpx; color: #aaa;">{{item.result}}</view>
						</uni-section>
						<uni-section v-if="item.type == 4" class="mb-10" title="班主任处理结果" type="line">
							<template v-slot:right>提交人：{{item.createBy}}</template>
							<view style="padding: 0 35rpx; color: #aaa;">{{item.result}}</view>
						</uni-section>
						<uni-section v-if="item.type == 7" class="mb-10" title="宿管反馈结果" type="line">
							<template v-slot:right>提交人：{{item.createBy}}</template>
							<view style="padding: 0 35rpx; color: #aaa;">{{item.result}}</view>
						</uni-section>
					</view>
				</view>
			</view>



			<view class="" v-if="violationsShow">
				<view
					style="display: flex; padding: 20rpx; align-items: center; justify-content: space-around; margin-top: 100rpx;">
					<view class="" style="font-weight: 700; width: 40%;">宿舍补卡处理</view>
					<view class="" style="display: flex;">
						<view class="" style="font-size: 28rpx; color: #aaa;">对未打卡学生进行拍照补卡</view>
						<uni-icons v-if="checkShow" type="bottom" size="20" @click="changeCheckShow"></uni-icons>
						<uni-icons v-else type="top" size="20" @click="changeCheckShow"></uni-icons>
					</view>
				</view>

				<view v-if="checkShow">
					<uni-file-picker v-if="flag == ''" style="transform: translateX(35%);" limit="1"
						@delete="deletePhoto" @select="select" file-mediatype="image"
						v-model="imageValue"></uni-file-picker>
					<view class="tijiao" @click="submitCard">在寝补卡（违纪）</view>
				</view>
			</view>

			<view class="" v-else>
				<view class="" style="padding: 0 40rpx;">
					<view class="" style="display: flex; align-items: center; justify-content: space-between;">
						<view class="" style="display: flex; align-items: center;">
							<image src="../../../static/pic/xiaobiaoti.png" style="width: 40rpx; height: 40rpx;"
								mode="">
							</image>
							<view class="" style="margin-left: 30rpx; font-weight: 600;">{{detailInfo.createTime}}
							</view>
						</view>
						<view class=""
							style="border: 1rpx solid green; padding: 5rpx 10rpx; border-radius: 10rpx; font-size: 28rpx; color: green;">
							已完成
						</view>
					</view>
					<view
						style="border-left: 1rpx solid #aaa; padding: 20rpx 0 20rpx 45rpx; margin-left: 25rpx; height: 50rpx;"
						class="lastBox">
						<view style="border: 1rpx solid #aaa; border-radius: 10rpx; padding:0 20rpx 28rpx 20rpx;">
							<uni-section class="mb-10" title="违纪拍照" type="line">
								<template v-slot:right>提交人：{{detailInfo.createBy}}</template>
								<image @click="clickImg()" :src="this.imgSrc" mode=""
									style="width: 500rpx; height: 300rpx;">
							</uni-section>

							<view style=" text-align: center; color: red;">补卡时间:{{detailInfo.createTime}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import taskNotReturned from "@/api/modules/taskNotReturned.js"
	import managementTeacher from "@/api/modules/managementTeacher.js"
	import teacherClass from "@/api/modules/teachClass.js"
	import {
		parseTime
	} from "@/utils/date.js"
	import dormitoryCheck from "@/api/modules/dormitoryCheck"
	export default {
		data() {
			return {
				radioList: [{
					value: "1",
					text: "已联系班主任",
				}, {
					value: "2",
					text: "无联系班主任提交，已提交宿管负责人",
				}],
				bzrUrl: "",
				topName: "处理",
				userName: "",
				studentInfo: {},
				notReturnedDate: "",
				reason: "",
				buildNo: "",
				date: "",
				processContent: "",
				recordList: [{
					result: "",
				}, {
					result: "",
				}, {
					result: "",
				}],
				studentId: "",
				flag: "",
				applyDesc: "",
				formData: {},
				count: 0,
				imageValue: [],
				mendCardPhoto: "",
				createSubmitType: "",
				checkShow: true,
				handleShow: true,
				id: "",
				type: "",
				reason: "",
				violationPhoto: "",
				violationsShow: true,
				imgSrc: "",
				handleTwoShow: true,
				handleThreeShow: true,
				detailInfo: {

				},
			}
		},
		methods: {
			changeHandleShowThree() {
				this.handleThreeShow = !this.handleThreeShow
			},
			changeHandleShowTwo() {
				this.handleTwoShow = !this.handleTwoShow
			},
			changeHandleShow() {
				this.handleShow = !this.handleShow
			},
			changeCheckShow() {
				this.checkShow = !this.checkShow
			},

			select(e) {
				uni.uploadFile({
					url: uni.url + 'common/uploadFile', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'file',
					formData: {
						'user': 'test',
					},
					header: {
						Authorization: "Bearer " + uni.getStorageSync("token"),
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes)
						this.violationPhoto = JSON.parse(uploadFileRes.data).data
						console.log(this.violationPhoto)
					}
				});
			},
			submitCard() {
				if (!this.violationPhoto) {
					uni.showToast({
						title: "请上传图片",
						icon: "none"
					})
					return
				}
				this.formData.applyDesc = "违纪（在寝确认）"
				this.formData.flag = 1
				this.formData.createBy = this.userName
				this.formData.attachment = this.violationPhoto

				teacherClass.processWorkFlow(this.formData).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.showToast({
							title: "操作成功",
							duration: 2
						})
						uni.navigateTo({
							url: this.bzrUrl
						})
					}

				})

			},
			deletePhoto(e) {
				this.violationPhoto = ""
			},
			clickImg(img) {
				uni.previewImage({
					urls: [this.imgSrc], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			// 拿到上传参数
			getFromData(options) {
				teacherClass.workFlowInfo({
					processInstanceId: options.processInstanceId,
					createBy: this.userName
				}).then(res => {
					if (res.data.processInstanceId == null) {
						dormitoryCheck.getNotReturndeApplyDetail({
							processInstanceId: options.processInstanceId,
						}).then(e => {
							console.log(e)
							this.detailInfo = e.data
							this.detailInfo.createTime = parseTime(this.detailInfo.createTime)
							this.violationsShow = false
							var that = this
							this.imgSrc =
								`${that.$baseAppUrl}common/downloadFileImg?filename=${e.data.violationPhoto}`
						})
					} else {
						this.formData = res.data
						this.violationsShow = true
					}
				})
			},
			getRecords(date, id) {
				managementTeacher.getTrackRecordByDateAndStuId(date, id).then(res => {
					this.recordList = res.data
					this.recordList.forEach(item => {
						item.createTime = parseTime(new Date(item.createTime).getTime())
						console.log(item.createTime)
					})
					console.log(this.recordList)
				})
			},
		},
		onLoad(options) {
			this.userName = uni.getStorageSync("userName")
			if (options.flag == 9) {
				console.log(options)
				this.bzrUrl =
					`/pages_main/managementTeacher/allTypeUnStudentList/allTypeUnStudentList?buildNo=${options.buildNo}&date=${options.searchDate}&current=${options.current}&storey=${options.storey}&attenceStatus=${options.attenceStatus}`

			} else {
				this.bzrUrl =
					`/pages_main/managementTeacher/unCheckedStudents/unCheckedStudents?buildNo=${options.buildNo}&searchDate=${options.searchDate}&current=${options.current}`
			}
			this.studentId = options.studentId
			this.notReturnedDate = options.accessDate.slice(0, 10)
			this.id = options.id
			taskNotReturned.getStudentById(this.studentId).then(res => {
				this.studentInfo = res.data
			})
			this.getFromData(options)
			this.getRecords(options.searchDate, this.studentId)

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {
		height: 100vh;

	}

	.character {
		/* width: 150rpx; */
		font-size: 26rpx;
		/* color: #979999; */
		color: #444;
	}

	.popup-content {
		/* @include flex; */
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 20vh;
		background-color: #fff;
		width: 500rpx;
	}

	.box {
		/* margin-top: 20rpx; */
		border-top: 1rpx solid #ddd;
	}

	.box:nth-child(1) {
		margin-top: -20rpx;
		border-top: none;
	}


	.card {
		width: 86%;
		/* border: 1rpx #000 solid; */
		padding: 20rpx 10rpx 20rpx 10rpx;
		display: flex;
		font-size: 24rpx;
		justify-content: space-between;
	}

	.ftColor {
		color: #3333d3;
	}

	.cancel {
		/* width: 35%; */
		background-color: #a0a0a0;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}

	.tijiao {
		margin: 20rpx auto 0;
		width: 500rpx;
		background-color: #3333d3;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}

	/deep/.file-picker__box[data-v-4c5c5653] {
		width: 20%;
		height: 70rpx;
	}

	.queren {
		width: 230rpx;
		height: 50rpx;
		background-color: #3333d3;
		color: #fff;
		margin-top: 10rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 10rpx;
	}

	.queren2 {
		width: 230rpx;
		height: 50rpx;
		background-color: #ff009a;
		color: #fff;
		margin-top: 10rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 10rpx;
	}
</style>